<header class="container mx-auto p-4 flex flex-wrap justify-between items-center gap-6 flex-row sm:flex-col lg:flex-row">
    <a href="/">
      <img src="/assets/img/logo.svg" class="h-10">
    </a>
    <svg class="h-8 w-8 sm:hidden" viewBox="-10 -10 20 20" 
      onclick="document.querySelector('nav').classList.toggle('hidden'); document.querySelector('nav').classList.toggle('flex');">
      <rect x="-7" y="-6" width="14" height="2" />
      <rect x="-7" y="-1" width="14" height="2" />
      <rect x="-7" y="4" width="14" height="2" />
    </svg>
    <nav class="sm:flex sm:flex-row sm:w-auto w-full flex-col gap-3 sm:gap-12 hidden">
      <a class="link flex gap-3 items-center" href="/getting_started">
        <span>⚡</span> 
        <span>Getting Started</span>
      </a>
      <a class="link flex gap-3 items-center" href="/docs">
        <span>✍️</span>
        <span>Docs</span>
      </a>
      <a class="link flex gap-3 items-center" href="/guides">
        <span>💡</span>
        <span>Guides</span>
      </a>
      <div class="group relative cursor-pointer font-semibold flex gap-3 items-center" onClick="document.querySelector('.help-menu').classList.toggle('flex'); document.querySelector('.help-menu').classList.toggle('hidden');">
        <span>🖐</span>
        <span>Community</span>
        <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
          <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
        </svg>
        <div class="help-menu hidden group-hover:flex flex-col absolute top-6 sm:right-0 bg-white shadow w-52">
          <a class="link px-4 py-2 inline-block hover:bg-gray-100"
            href="https://github.com/gradio-app/gradio/issues/new/choose" target="_blank">File an Issue</a>
          <a class="link px-4 py-2 inline-block hover:bg-gray-100"
            href="https://discuss.huggingface.co/c/gradio/26" target="_blank">Discuss</a>
          <a class="link px-4 py-2 inline-block hover:bg-gray-100" target="_blank"
            href="https://discord.gg/feTf9x3ZSB">Discord</a>
          <a class="link px-4 py-2 inline-block hover:bg-gray-100" target="_blank"
            href="https://gradio.curated.co/">Newsletter</a>
        </div>
      </div>
    </nav>
  </header>
